<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户列表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
<div class="ui-layout-west">
        <div class="col-sm-6 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            道路编码：<input type="text" name="roadcode"/>
                        </li>

                        <li>
                            道路名称：<input type="text" name="roadname"/>
                        </li>

                        <li>
                            所属乡镇：<input type="text" name="deptname" onclick="selectDeptTree()" id="treeName"  placeholder="请选择归属单位"/>
                            <input name="deptId" type="text" id="treeId" hidden="hidden"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-6 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
</div>

<div class="ui-layout-center">
        <div id="map" class="ui-layout-content"></div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: map"/>
<script th:inline="javascript">
    var prefix = ctx + "roadnet/baseRoadwaysection";
    var features = new L.FeatureGroup();
    //获取行政区划编码
    var datas_depts=[[${@dept.getDept()}]];
    var map;
    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 400 });
        queryRoadList();
        LoadMap();
    });
    /*用户管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "320000" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: ctx + "system/dept/selectDeptTree/" + deptId,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    var getSelect=function (data) {
        $.ajax({
            url: "/roadnet/baseMap/roadwaysection/"+data.roadcode,
            type: "get",
            success: function(result) {
                Addleayer(result.rows)
            }
        })
    };
    function Addleayer (data) {
        features.clearLayers();
        $.each(data, function (i) {
            var shape = data[i].shape;
            var wkt_geom = shape;
            var wicket = new Wkt.Wkt();
            wicket.read(wkt_geom);
            var color;
            if (data[i].roadsectionid % 2 == 1) { color = "#00a0e9"; }
            if (data[i].roadsectionid % 2 == 0) { color = "#00479d"; }

            var wit = wicket.toObject({
                "color": color,
                "weight": 8
            });
            features.addLayer(wit);
            map.fitBounds(features.getBounds());

            var shapeOld = new Array();
            shapeOld[0] = data[i].y;
            shapeOld[1] = data[i].x;
            if (i == 0) shapeFirst = shapeOld;

            var myIcon = L.icon({
                iconUrl: 'my-icon.png',
                iconSize: [0, 0],
                iconAnchor: [10000, 10000],
                shadowUrl: 'my-icon-shadow.png',
                shadowSize: [0, 0],
                shadowAnchor: [10000, 10000]
            });
            var StartNum = data[i].startnum.toString();
            var EndNum = data[i].endnum.toString();
            var show = data[i].roadsectionid + "  (K" + StartNum + " - K" + EndNum + ")";
            var RoadCode = data[i].roadcode;
            var RoadName = data[i].roadname;
            var StartName = data[i].startname;
            var EndName = data[i].endname;
            var RebuildYear = "";
            if (data[i].RebuildYear != null) RebuildYear = data[i].RebuildYear;
            else
                RebuildYear = "空";

            var zh_start = convertToKPlus(parseFloat(StartNum));
            var zh_end = convertToKPlus(parseFloat(EndNum));
            var techLevelName = data[i].TechLevel;
            switch (techLevelName) {
                case 10:
                    techLevelName = "高速";
                    break;
                case 11:
                    techLevelName = "一级";
                    break;
                case 12:
                    techLevelName = "二级";
                    break;
                case 13:
                    techLevelName = "三级";
                    break;
                case 14:
                    techLevelName = "四级";
                    break;
                case 30:
                    techLevelName = "等外";
                    break;
                default:
                    break;
            }

            var popUpInf = "<div id='popUpInf" + i + "'><div class='' style='cursor: move;border-bottom: 1px solid #D5D5D5;font-weight: bold;' move='ok'>路线基本信息</div>" +
                "<div id='popDiv' style='width: 300px; height: 240px; margin-top: 10px;'>" +
                "<table style='width: 100%; height: 100%;'>" +
                "<tr>" +
                "<td class='tdclass'>名称：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px;  '>" + RoadName + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>编码：</td>" +
                "<td style='text-align:left;'><div id = 'codeM' style = 'width:180px;  '>" + RoadCode + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>起止路段：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + StartName + "--" + EndName + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>起止桩号：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + zh_start + "--" + zh_end + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>路基宽度：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].roadbedwidth + "(米)" + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>路面宽度：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].roadsurfacewindth + "(米)" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>建造年份：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].buildyear + "(年)</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>所属机构：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].maintainunitname + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'><a class='btn btn-primary' style='color:white;' id='ViewDeatil' onclick=$.operate.detailForm('" + data[i].id +"','"+prefix+"/view/{id}"+ "') style='cursor:pointer'>查看详情</a></td>" +
                "</tr> " +
                "</table >" +
                "</div>" +
                "</div>";

            //getPhotoPath("R", data[i].GUID);
            L.marker([shapeOld[1], shapeOld[0]], { icon: myIcon }).bindTooltip(show, { permanent: true, interactive: true })
                .bindPopup(popUpInf)
                .addTo(features).openTooltip();
            map.addLayer(features);
            if (shapeFirst != undefined)
                map.setView([shapeFirst[1], shapeFirst[0]], 13);
            //$('#' + this.id).setSelection(selectedRowIndex, false);

        });
    }
    function convertToKPlus(num) {
        return 'K' + num.toFixed(3).replace('.', '+');
    }
    function queryRoadList() {
        var options = {
            url: prefix + "/list",
            detailUrl: prefix + "/roadwaySection/{id}",
            mapUrl: prefix + "/roadwaymap/{id}",
            exportUrl: prefix + "/export",
            // onclick:function (data) {
            //     alert(JSON.stringify(data))
            // },
            onClickRow:getSelect,
            modalName: "路段",
            showExport: true,
            striped: true,//斑马线
            columns: [{
                field: 'selectItem',
                radio: true
            },
                {
                    field : 'roadcode',
                    title : '道路编码',
                    sortable: true
                },
                {
                    field : 'startnum',
                    title : '开始桩号',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return convertToKPlus(value);
                    }
                },
                {
                    field : 'endnum',
                    title : '结束桩号',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return convertToKPlus(value);
                    }
                },
                {
                    field : 'deptId',
                    title : '所属乡镇',
                    sortable: true,
                    formatter: function(value, row, index) {
                        return selectDeptLabel(datas_depts, value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        // actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="#" onclick="$.operate.map(\'' + row.roadcode + '\')"><i class="fa fa-edit"></i>查看地图</a> ');
                        // actions.push('<a class="btn btn-success btn-xs ' + detailFlag + '" href="#" onclick="$.operate.detail(\'' + row.roadcode + '\')"><i class="fa fa-edit"></i>查看路段</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
        
       var clickRow= function () {
            alert(JSON.stringify(data))
        }

        var  convertToKPlus=function(num) {
            return 'K' + num.toFixed(3).replace('.', '+');
        }
        var selectDeptLabel=function(datas, value) {
            var actions = [];
            $.each(datas, function(index, dept) {
                if (dept.deptId == ('' + value)) {
                    var listClass = "";
                    actions.push($.common.sprintf("<span class='%s'>%s</span>", listClass, dept.deptName));
                    return false;
                }
            });
            return actions.join('');
        }
    }
    function doSubmit(index, layero){
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    }
    function LoadMap() {
        InitializeMap(32.223, 120.977, 9, 9);
    }
</script>
</body>
</html>